<!--
 * @Author: AuroCaffe 18509564594@163.com
 * @Date: 2025-05-17 11:24:45
 * @LastEditors: AuroCaffe 18509564594@163.com
 * @LastEditTime: 2025-07-29 11:33:04
 * @FilePath: \HuiLin\pages\homePages\orderInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="order-info-container">
		<!-- 头部 -->
		<headerSlotVue :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-content" @click="closePage()">
					<view class="back-btn">
						<text class="back-icon">←</text>
					</view>
					<view class="page-title">
						<text class="title-text">订单详情</text>
					</view>
				</view>
			</template>
		</headerSlotVue>

		<!-- 订单状态卡片 -->
		<view class="status-card">
			<view class="status-content">
				<view class="status-left">
					<view class="status-icon">
						<image src="@/pages/homePages/static/image/run.png" mode="aspectFit"></image>
					</view>
					<view class="status-info">
						<text class="status-text">{{getOrderStatusText(serviceOrderInfo.status)}}</text>
						<text class="status-desc">{{getStatusDescription(serviceOrderInfo.status)}}</text>
					</view>
				</view>
				<view class="status-right">
					<text class="reward-label">赏金</text>
					<text class="reward-amount">¥{{getReward()}}</text>
				</view>
			</view>
		</view>

		<!-- 订单进度 -->
		<view class="progress-card">
			<view class="progress-steps">
				<view class="step-item" :class="{'completed': index <= progress, 'current': index === progress}"
					v-for="(item, index) in basicsList" :key="index">
					<view class="step-icon">
						<text :class="'cuIcon-' + item.cuIcon"></text>
					</view>
					<text class="step-text">{{item.name}}</text>
				</view>
			</view>
		</view>

		<!-- 订单基本信息 -->
		<view class="info-card">
			<view class="card-header">
				<text class="card-title">基本信息</text>
			</view>
			<view class="card-content">
				<view class="order-type">
					<view class="type-section">
						<text class="type-text">{{getOrderType()}}</text>
						<!-- 仅限业主标识 -->
						<view v-if="serviceOrderInfo.onlyOwner" class="owner-only-tag">
							<text class="owner-only-text">仅限业主</text>
						</view>
					</view>
				</view>

				<view class="info-item">
					<text class="info-label">联系人</text>
					<text class="info-value">{{getRequesterName()}}</text>
				</view>

				<view class="info-item">
					<view class="info-label-with-icon">
						<text class="icon">📞</text>
						<text class="label">联系电话</text>
					</view>
					<text class="info-value">
						{{getPhoneDisplay(serviceOrderInfo.contactPhone)}}
					</text>
				</view>

				<view class="info-item" v-if="hasStartAddress()">
					<text class="info-label">服务起点</text>
					<text class="info-value">{{serviceOrderInfo.startAddress}}</text>
				</view>

				<view class="info-item">
					<text class="info-label">服务终点</text>
					<text class="info-value">{{getEndAddress()}}</text>
				</view>
			</view>
		</view>

		<!-- 接单人信息 -->
		<view class="info-card" v-if="hasAccepter()">
			<view class="card-header">
				<text class="card-title">接单人信息</text>
			</view>
			<view class="card-content">
				<view class="info-item">
					<text class="info-label">接单人</text>
					<text class="info-value">{{getAccepterName()}}</text>
				</view>

				<view class="info-item">
					<view class="info-label-with-icon">
						<text class="icon">📞</text>
						<text class="label">联系电话</text>
					</view>
					<text class="info-value">
						{{getPhoneDisplay(getAccepterPhone())}}
					</text>
				</view>
			</view>
		</view>

		<!-- 订单详情 -->
		<view class="info-card">
			<view class="card-header">
				<text class="card-title">订单详情</text>
			</view>
			<view class="card-content">
				<view class="detail-item" v-if="serviceOrderInfo.itemType">
					<text class="detail-label">物品类型</text>
					<text class="detail-value">{{serviceOrderInfo.itemType}}</text>
				</view>

				<view class="detail-item" v-if="serviceOrderInfo.description">
					<text class="detail-label">任务描述</text>
					<text class="detail-value">{{serviceOrderInfo.description}}</text>
				</view>

				<view class="detail-item" v-if="hasImages()">
					<text class="detail-label">图片描述</text>
					<ImageList :images="serviceOrderInfo.images" />
				</view>

				<view class="detail-item" v-if="hasPickupImages()">
					<text class="detail-label">取件图片</text>
					<ImageList :images="serviceOrderInfo.pickupImages" />
				</view>

				<view class="detail-item" v-if="hasPickupVouchers()">
					<text class="detail-label">购买凭证</text>
					<ImageList :images="serviceOrderInfo.pickupVouchers" />
				</view>

				<view class="detail-item" v-if="hasDeliveryImages()">
					<text class="detail-label">送达图片</text>
					<ImageList :images="serviceOrderInfo.deliveryImages" />
				</view>

				<view class="detail-item" v-if="hasComment()">
					<text class="detail-label">评价内容</text>
					<view class="comment-content">
						<view class="comment-rating" v-if="serviceOrderInfo.rating">
							<text class="rating-label">评分：</text>
							<uni-rate :value="serviceOrderInfo.rating" size="16" :readonly="true" />
							<text class="rating-value">{{ serviceOrderInfo.rating }}分</text>
						</view>
						<view class="comment-text" v-if="serviceOrderInfo.comment">
							<text class="comment-text-content">{{ serviceOrderInfo.comment }}</text>
						</view>
						<view class="comment-images" v-if="hasCommentImages()">
							<ImageList :images="serviceOrderInfo.commentImages" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 取件码 -->
		<view class="info-card" v-if="hasPickupCode()">
			<view class="card-header">
				<text class="card-title">取件码</text>
			</view>
			<view class="card-content">
				<view class="pickup-codes">
					<view class="code-item" v-for="code in serviceOrderInfo.pickupCode" :key="code">
						<text class="code-text">{{code}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-actions" v-if="getOrderActions().length > 0">
			<view class="action-buttons">
				<view v-for="(action, idx) in getOrderActions()" :key="idx" class="action-btn"
					:class="action.class" @click="handleAction(action)">
					<text class="action-text">{{ action.text }}</text>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="loading-overlay" v-if="loading">
			<view class="loading-content">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>
		</view>

		<!-- 通用弹窗 -->
		<uni-popup ref="commonDialog" type="dialog">
			<uni-popup-dialog :mode="dialog.mode" :type="dialog.type" :title="dialog.title"
				:confirmText="dialog.confirmText" :cancelText="dialog.cancelText" :value="dialog.value"
				:placeholder="dialog.placeholder" @confirm="handleDialogConfirm" @close="handleDialogClose">
				<!-- 弹窗内容 -->
				<view class="dialog-content">
					<!-- 1. 取件信息弹窗内容 -->
					<view v-if="dialog.dialogType === 'actualInfo'" class="actual-info-dialog">
						<view class="form-item">
							<text class="label">购买金额：</text>
							<uni-easyinput :trim="true" :clearable="true" v-model="amount" placeholder="填写实际购买价格" />
						</view>
						<uni-file-picker limit="6" title="添加购物/取件凭证" v-model="imageList" :image-styles="imgStyle"
							@select="voucherUploadImages" />
					</view>

					<!-- 2. 评价弹窗内容 -->
					<view v-else-if="dialog.dialogType === 'score'" class="score-dialog">
						<view class="form-item score-form-item">
							<text class="label">评分：</text>
							<uni-rate v-model="commentForm.rating" size="20" />
						</view>
						<view class="form-item score-form-item">
							<text class="label">评价：</text>
							<uni-easyinput :trim="true" :clearable="true" v-model="commentForm.comment"
								placeholder="请输入评价内容" />
						</view>
						<view class="form-item score-form-item">
							<text class="label">图片：</text>
							<uni-file-picker limit="6" title="添加评价图片" v-model="commentForm.commentImages"
								:image-styles="imgStyle" @select="commentUploadImages" />
						</view>
					</view>

					<!-- 3. 帮我买确认完成弹窗内容 -->
					<view v-else-if="dialog.dialogType === 'buyComplete'" class="buy-complete-dialog">
						<view class="form-item">
							<text class="label">购买金额：</text>
							<text class="value">¥{{ getActualAmount(dialog.data) }}</text>
						</view>
						<view class="form-item" v-if="getPickupVouchers(dialog.data).length > 0">
							<text class="label">购买凭证：</text>
							<view class="voucher-images">
								<view v-for="(img, index) in getPickupVouchers(dialog.data)" :key="index"
									class="voucher-image-item"
									@click="previewVoucherImage(img, getPickupVouchers(dialog.data))">
									<image :src="img.url || img" class="voucher-image" mode="aspectFill" />
								</view>
							</view>
						</view>
						<view class="form-item">
							<text class="label">服务费用：</text>
							<text class="value">¥{{ getReward() }}</text>
						</view>
						<view class="form-item total-item">
							<text class="label">总计费用：</text>
							<text class="value total-value">¥{{ getTotalAmount(dialog.data) }}</text>
						</view>
					</view>

					<!-- 4. 业主权限弹窗内容 -->
					<view v-else-if="dialog.dialogType === 'owner'" class="owner-dialog">
						<view class="owner-icon">🏠</view>
						<text class="owner-content">{{ dialog.content }}</text>
					</view>

					<!-- 5. 默认弹窗内容 -->
					<view v-else class="default-dialog">
						<text>{{dialog.content}}</text>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		serviceOrderDetail,
	} from "@/api/order.js"

	import {
		getPlatformInfo
	} from "@/api/members.js"
	import headerSlotVue from '@/components/header-slot.vue';
	import storage from "@/utils/storage.js";
	import config from '@/config/config';
	import orderMixin from "@/minixs/orderMixins.js"
	import ImageList from '@/components/ImageList.vue';
	import {
		getOrderStatusText,
		maskPhoneNumber
	} from '@/utils/orderUtils';
	import {
		orderEvaluate
	} from "@/api/order.js"
	import {
		rePay,
		getOrderPayStatus
	} from "@/api/pay.js"
	export default {
		components: {
			headerSlotVue,
			ImageList,
		},
		mixins: [orderMixin],
		data() {
			return {
				config,
				evaluate: "",
				rateValue: 1,
				amount: 0, // 重新添加，用于实际金额输入
				propTitle: '接单之后取消订单将扣除信誉积分,是否确认接单',
				userInfo: {},
				serviceOrderInfo: {
					accepter: {},
					requester: {},
					// 可根据实际情况初始化其它常用嵌套对象
				},
				platformInfo: null,
				orderItem: {},
				pickupImages: [],
				pickedImages: [],
				STATUS: {
					'pending': '待接单',
					'accepted': '已接单',
					'picked': '已取件',
					'delivered': '已送达',
					'completed': '已完成',
					'cancelled': '已取消',
				},
				basicsList: [{
						cuIcon: 'roundright',
						name: '待接单'
					}, {
						cuIcon: 'usefullfill',
						name: '已接单'
					},
					{
						cuIcon: 'deliver',
						name: '确认取件'
					},
					{
						cuIcon: 'form',
						name: '确认送达'
					},
					{
						cuIcon: 'roundcheckfill',
						name: '完成'
					}
				],
				basics: 0,
				imageList: [],
				actualImageList: [],
				// platformInfo: 10,
				dialog: {
					show: false,
					title: '',
					type: 'base',
					mode: 'base',
					confirmText: '确认',
					cancelText: '取消',
					value: '',
					placeholder: '',
					dialogType: '',
					content: '',
					onConfirm: null,
					onClose: null,
				},
				commentForm: {
					comment: '',
					rating: 1,
					commentImages: []
				},
				// amount: '', // 已在 orderMixin 中定义
				imgStyle: {
					width: 120,
					height: 120,
					border: {
						color: "#ccc",
						radius: "8"
					}
				},
				loading: false,
				showActions: true,
			};
		},
		onLoad(opt) {
			console.log('orderInfo onLoad:', opt);
			this.orderId = opt && opt.id ? opt.id : null;
			console.log('orderId:', this.orderId);
			this.userInfo = storage.getUserInfo();
			console.log('userInfo:', this.userInfo);
			this.initInfo();
		},
		onPullDownRefresh() {
			this.initInfo()
		},
		computed: {
			progress() {
				// 定义订单状态映射
				const orderStatuses = {
					'pending': 0,
					'accepted': 1,
					'picked': 2,
					'delivered': 3,
					'completed': 4,
					'cancelled': 5,
				};

				return orderStatuses[this.serviceOrderInfo.status]
			}
		},
		methods: {
			getOrderStatusText,
			maskPhoneNumber,
			closePage() {
				uni.navigateBack();
			},
			initInfo() {
				console.log('initInfo called, orderId:', this.orderId);
				if (!this.orderId) {
					console.error('orderId is missing');
					uni.showToast({
						title: '订单ID缺失',
						icon: 'error'
					});
					return;
				}

				uni.showLoading({
					mask: true,
					title: '加载中...'
				});

				serviceOrderDetail(this.orderId).then(res => {
					console.log('serviceOrderDetail response:', res);
					if (res.data.code == 200) {
						this.serviceOrderInfo = res.data.data;
						console.log('serviceOrderInfo set:', this.serviceOrderInfo);

						// 权限检查：只有下单人或接单人才能查看订单详情
						if (!this.isMyOrder(this.serviceOrderInfo)) {
							// 不是我的订单，检查订单状态
							if (this.serviceOrderInfo.status !== 'pending') {
								// 订单已被接取，不允许查看
								uni.hideLoading();
								uni.showToast({
									title: "订单已被接取，无法查看详情",
									icon: "error"
								});
								setTimeout(() => {
									this.closePage();
								}, 1500);
								return;
							}
						}

					} else {
						console.error('API error:', res.data);
						uni.showToast({
							title: res.data.message || "出错啦!!",
							icon: "error",
						});
						setTimeout(() => {
							this.closePage();
						}, 1000);
					}
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}).catch(err => {
					console.error('serviceOrderDetail error:', err);
					uni.showToast({
						title: "网络错误!!",
						icon: "error",
					});
					this.closePage();
				});
			},


			// 预览图片的方法
			previewImage(img, imgArr) {
				uni.previewImage({
					current: img, // 当前显示图片的http链接
					urls: imgArr // 需要预览的图片http链接列表
				});
			},
			// 删除 getOrderStatusText 和 maskPhoneNumber 方法
			// 替换页面所有 this.getOrderStatusText(status) 为 getOrderStatusText(status)
			// 替换 this.maskPhoneNumber(phone) 为 maskPhoneNumber(phone)
			openDialog(options = {}) {
				this.dialog = {
					...this.dialog,
					...options,
					show: true,
				};
				
				// 如果是 actualInfo 对话框，重置 amount
				if (options.dialogType === 'actualInfo') {
					this.amount = 0;
				}
				
				this.$refs.commonDialog.open();
			},
			// handlePayAndComplete 方法已在 orderMixin 中定义



			handleDialogConfirm(e) {
				// 根据对话框类型直接调用相应方法
				switch (this.dialog.dialogType) {
					case 'actualInfo':
						// 添加调试信息
						console.log('handleDialogConfirm - actualInfo case');
						console.log('this.amount:', this.amount);
						console.log('this.serviceOrderInfo:', this.serviceOrderInfo);
						// 传递包含 amount 的数据对象
						this.confirmActual(this.serviceOrderInfo, { amount: this.amount });
						break;
					case 'buyComplete':
						this.orderItem = this.serviceOrderInfo;
						this.handlePayAndComplete(this.serviceOrderInfo);
						break;
					case 'receipt':
						this.orderItem = this.serviceOrderInfo;
						this.confirmReceipt();
						break;
					default:
						// 如果有自定义回调，则执行
						if (typeof this.dialog.onConfirm === 'function') {
							this.dialog.onConfirm(e);
						}
				}
				this.dialog.show = false;
			},
			handleDialogClose() {
				if (typeof this.dialog.onClose === 'function') {
					this.dialog.onClose();
				}
				this.dialog.show = false;
				
				// 如果是 actualInfo 对话框，重置 amount
				if (this.dialog.dialogType === 'actualInfo') {
					this.amount = 0;
				}
			},

			// 获取状态描述
			getStatusDescription(status) {
				const statusDescMap = {
					'pending': '等待接单中',
					'accepted': '订单已被接取',
					'picked': '物品已取件',
					'delivered': '物品已送达',
					'completed': '订单已完成',
					'cancelled': '订单已取消',
				};
				return statusDescMap[status] || '未知状态';
			},

			// 获取电话显示
			getPhoneDisplay(phone) {
				if (!phone || phone === '') return '未知';
				if (this.isEmployee(this.serviceOrderInfo) || this.isEmployer(this.serviceOrderInfo)) {
					return phone;
				}
				return this.maskPhoneNumber(phone);
			},

			// 获取订单操作按钮
			getOrderActions() {
				const actions = [];

				// 根据订单状态和用户权限显示不同的操作按钮
				switch (this.serviceOrderInfo.status) {
					case 'pending':
						if (this.isEmployee(this.serviceOrderInfo)) {
							actions.push({
								text: '抢单',
								class: 'action-primary',
								action: 'accept'
							});
						}
						// 添加去支付按钮 - 雇主且订单未支付
						if (this.isEmployer(this.serviceOrderInfo) && this.serviceOrderInfo.payStatus === 'unpaid') {
							actions.push({
								text: '去支付',
								class: 'action-warning',
								action: 'pay'
							});
						}
						break;
					case 'accepted':
						if (this.isEmployee(this.serviceOrderInfo)) {
							actions.push({
								text: '取件',
								class: 'action-success',
								action: 'pickup'
							});
						}
						break;
					case 'picked':
						if (this.isEmployee(this.serviceOrderInfo)) {
							actions.push({
								text: '送达',
								class: 'action-warning',
								action: 'deliver'
							});
						}
						break;
					case 'delivered':
						if (this.isEmployer(this.serviceOrderInfo)) {
							actions.push({
								text: '确认完成',
								class: 'action-primary',
								action: 'complete'
							});
						}
						break;
				}

				// 添加取消操作 - 取件前可以取消订单，取件后不允许取消
				if (this.isMyOrder(this.serviceOrderInfo)) {
					// 只有待接单和已接单状态的订单才能取消（取件前）
					if (['pending', 'accepted'].includes(this.serviceOrderInfo.status)) {
						actions.push({
							text: '取消',
							class: 'action-danger',
							action: 'cancel'
						});
					}
				}

				// 添加私信功能
				if (this.isMyOrder(this.serviceOrderInfo) && ['accepted', 'picked', 'delivered'].includes(this
						.serviceOrderInfo.status)) {
					actions.push({
						text: '私信',
						class: 'action-info',
						action: 'message'
					});
				}

				// 添加评价功能
				if (this.isEmployer(this.serviceOrderInfo) && this.serviceOrderInfo.status === 'completed' && !this
					.serviceOrderInfo.rating) {
					actions.push({
						text: '评价',
						class: 'action-warning',
						action: 'evaluate'
					});
				}

				return actions;
			},

			// 处理操作按钮点击
			handleAction(action) {
				switch (action.action) {
					case 'accept':
						this.acceptOrder();
						break;
					case 'pickup':
						this.pickupOrder();
						break;
					case 'deliver':
						this.deliverOrder();
						break;
					case 'complete':
						this.completeOrder(this.serviceOrderInfo);
						break;
					case 'cancel':
						this.cancelOrder();
						break;
					case 'message':
						this.sendPrivateMsg(this.serviceOrderInfo);
						break;
					case 'evaluate':
						this.evaluateOrder();
						break;
					case 'pay':
						this.payServiceOrder(this.serviceOrderInfo);
						break;
				}
			},

			// 抢单
			acceptOrder() {
				this.openDialog({
					title: '确认抢单',
					content: `确定要抢这个订单吗？\n订单类型：${this.serviceOrderInfo.type}\n赏金：¥${this.serviceOrderInfo.reward}`,
					type: 'info',
					onConfirm: () => {
						this.clickEvent(this.serviceOrderInfo, '立即抢单');
					}
				});
			},

			// 取件
			pickupOrder() {
				if (this.serviceOrderInfo.type === '帮我买') {
					this.openDialog({
						title: '填写取件信息',
						dialogType: 'actualInfo'
					});
				} else {
					this.clickEvent(this.serviceOrderInfo, '拍照取件');
				}
			},

			// 送达
			deliverOrder() {
				this.clickEvent(this.serviceOrderInfo, '拍照送达');
			},

			// 取消订单
			cancelOrder() {
				// 使用 uni.showModal 作为备选方案
				uni.showModal({
					title: '取消订单',
					content: '请输入取消原因',
					editable: true,
					placeholderText: '请输入取消原因',
					success: (res) => {
						if (res.confirm) {
							this.confirmCancelOrder(this.serviceOrderInfo, res.content || '');
						}
					}
				});
			},

			// confirmCancelOrder 方法已在 orderMixin 中定义

			// 评价订单
			evaluateOrder() {
				this.clickEvent(this.serviceOrderInfo, '评价');
			},

			// payServiceOrder 方法已在 orderMixin 中定义









			// 获取发布者姓名
			getRequesterName() {
				if (this.serviceOrderInfo.requester && this.serviceOrderInfo.requester.nickname) {
					return this.serviceOrderInfo.requester.nickname;
				}
				return '未知';
			},

			// 检查是否有接单人
			hasAccepter() {
				return this.serviceOrderInfo.accepter && this.serviceOrderInfo.accepter._id;
			},

			// 获取接单人姓名
			getAccepterName() {
				if (this.serviceOrderInfo.accepter && this.serviceOrderInfo.accepter.nickname) {
					return this.serviceOrderInfo.accepter.nickname;
				}
				return '未知';
			},

			// 获取接单人电话
			getAccepterPhone() {
				if (this.serviceOrderInfo.accepter && this.serviceOrderInfo.accepter.phone) {
					return this.serviceOrderInfo.accepter.phone;
				}
				return '';
			},

			// 判断是否有图片
			hasImages() {
				return this.serviceOrderInfo.images && this.serviceOrderInfo.images.length > 0;
			},

			// 判断是否有取件图片
			hasPickupImages() {
				return this.serviceOrderInfo.pickupImages && this.serviceOrderInfo.pickupImages.length > 0;
			},

			// 判断是否有购买凭证
			hasPickupVouchers() {
				return this.serviceOrderInfo.pickupVouchers && this.serviceOrderInfo.pickupVouchers.length > 0;
			},

			// 判断是否有送达图片
			hasDeliveryImages() {
				return this.serviceOrderInfo.deliveryImages && this.serviceOrderInfo.deliveryImages.length > 0;
			},

			// 判断是否有评价内容
			hasComment() {
				return this.serviceOrderInfo.comment || this.serviceOrderInfo.rating || this.hasCommentImages();
			},

			// 判断是否有评价图片
			hasCommentImages() {
				return this.serviceOrderInfo.commentImages && this.serviceOrderInfo.commentImages.length > 0;
			},

			// 判断是否有取件码
			hasPickupCode() {
				return this.serviceOrderInfo.pickupCode && this.serviceOrderInfo.pickupCode.length > 0;
			},

			// 判断是否有服务起点
			hasStartAddress() {
				return this.serviceOrderInfo.startAddress && this.serviceOrderInfo.startAddress.trim() !== '';
			},

			// 获取赏金
			getReward() {
				return this.displayFee(this.serviceOrderInfo);
			},

			// 获取订单类型
			getOrderType() {
				if (this.serviceOrderInfo.type) {
					return this.serviceOrderInfo.type;
				}
				return '未知类型';
			},

			// 获取服务终点
			getEndAddress() {
				if (this.serviceOrderInfo.endAddress) {
					return this.serviceOrderInfo.endAddress;
				}
				return '未知';
			},

			// 获取实际购买金额
			getActualAmount(item) {
				if (!item) return '0.00';
				return (item.actualAmount || item.amount || 0).toFixed(2);
			},

			// 获取购买凭证
			getPickupVouchers(item) {
				if (!item) return [];
				return item.pickupVouchers || [];
			},

			// 获取总计费用
			getTotalAmount(item) {
				if (!item) return '0.00';
				const actualAmount = parseFloat(item.actualAmount || item.amount || 0);
				const reward = parseFloat(item.reward || 0);
				return (actualAmount + reward).toFixed(2);
			},

			// 预览购买凭证图片
			previewVoucherImage(currentImg, imgList) {
				const urls = imgList.map(img => img.url || img);
				const current = currentImg.url || currentImg;
				uni.previewImage({
					current: current,
					urls: urls
				});
			},


		}
	}
</script>

<style lang="scss" scoped>
	.order-info-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	// 头部样式
	.header-content {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
		display: flex;
		align-items: center;
	}

	.back-btn {
		margin-right: 20rpx;
	}

	.back-icon {
		font-size: 40rpx;
	}

	.page-title {
		flex: 1;
		text-align: center;
	}

	.title-text {
		font-weight: 800;
		font-size: 36rpx;
		color: #2C2622;
	}

	// 状态卡片
	.status-card {
		background-color: white;
		margin: 24rpx;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
	}

	.status-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.status-left {
		display: flex;
		align-items: center;
	}

	.status-icon {
		width: 64rpx;
		height: 64rpx;
		margin-right: 24rpx;
	}

	.status-info {
		display: flex;
		flex-direction: column;
	}

	.status-text {
		font-size: 36rpx;
		font-weight: 700;
		color: #000;
		margin-bottom: 8rpx;
	}

	.status-desc {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.8);
	}

	.status-right {
		text-align: right;
	}

	.reward-label {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.8);
		display: block;
		margin-bottom: 8rpx;
	}

	.reward-amount {
		font-size: 48rpx;
		font-weight: 800;
		color: #fe6100;
	}

	// 进度卡片
	.progress-card {
		background: white;
		margin: 24rpx;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}

	.progress-steps {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		flex: 1;
	}

	.step-item:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 24rpx;
		left: 50%;
		width: 100%;
		height: 2rpx;
		background: #e0e0e0;
		z-index: 1;
	}

	.step-item.completed:not(:last-child)::after {
		background: #FE6100;
	}

	.step-icon {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		background: #e0e0e0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
		position: relative;
		z-index: 2;
	}

	.step-item.completed .step-icon {
		background: #FE6100;
		color: white;
	}

	.step-item.current .step-icon {
		background: #FE6100;
		color: white;
		box-shadow: 0 0 0 8rpx rgba(254, 97, 0, 0.2);
	}

	.step-icon-text {
		font-size: 24rpx;
	}

	.step-text {
		font-size: 24rpx;
		color: #8F97A2;
		text-align: center;
	}

	.step-item.completed .step-text,
	.step-item.current .step-text {
		color: #2C2622;
		font-weight: 500;
	}

	// 信息卡片
	.info-card {
		background: white;
		margin: 24rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}

	.card-header {
		padding: 24rpx 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background: #fafafa;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #2C2622;
	}

	.card-content {
		padding: 32rpx;
	}

	.order-type {
		margin-bottom: 24rpx;
	}

	.type-section {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.type-text {
		font-size: 36rpx;
		font-weight: 700;
		color: #2C2622;
	}

	// 仅限业主标识样式
	.owner-only-tag {
		padding: 4rpx 12rpx;
		background: linear-gradient(135deg, #ff6b6b, #ee5a52);
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
	}

	.owner-only-text {
		font-size: 20rpx;
		color: white;
		font-weight: 600;
	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-label {
		font-size: 28rpx;
		color: #8F97A2;
		min-width: 120rpx;
		margin-right: 24rpx;
	}

	.info-label-with-icon {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #8F97A2;
		min-width: 120rpx;
		margin-right: 24rpx;
	}

	.icon {
		font-size: 24rpx;
		margin-right: 8rpx;
	}

	.info-value {
		font-size: 28rpx;
		color: #2C2622;
		flex: 1;
	}

	// 详情项
	.detail-item {
		margin-bottom: 24rpx;
	}

	.detail-item:last-child {
		margin-bottom: 0;
	}

	.detail-label {
		font-size: 28rpx;
		color: #8F97A2;
		margin-bottom: 12rpx;
		display: block;
	}

	.detail-value {
		font-size: 28rpx;
		color: #2C2622;
		line-height: 1.5;
	}

	// 评价内容样式
	.comment-content {
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 20rpx;
		border: 1rpx solid #e9ecef;
	}

	.comment-rating {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.rating-label {
		font-size: 24rpx;
		color: #8F97A2;
		margin-right: 12rpx;
	}

	.rating-value {
		font-size: 24rpx;
		color: #FE6100;
		font-weight: 600;
		margin-left: 12rpx;
	}

	.comment-text {
		margin-bottom: 16rpx;
	}

	.comment-text-content {
		font-size: 28rpx;
		color: #2C2622;
		line-height: 1.6;
	}

	.comment-images {
		margin-top: 16rpx;
	}

	// 取件码
	.pickup-codes {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.code-item {
		background: #f5f5f5;
		padding: 16rpx 24rpx;
		border-radius: 8rpx;
		border: 2rpx solid #e0e0e0;
	}

	.code-text {
		font-size: 28rpx;
		font-weight: 600;
		color: #2C2622;
		font-family: 'Courier New', monospace;
	}

	// 底部操作按钮
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		padding: 24rpx 32rpx;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
		z-index: 10;
		border-top: 1rpx solid #f1f3f4;
	}

	.action-buttons {
		display: flex;
		gap: 16rpx;
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	.action-btn {
		padding: 16rpx 32rpx;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-weight: 600;
		transition: all 0.2s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

		&.action-primary {
			background: linear-gradient(135deg, #007bff, #0056b3);
			color: white;

			&:active {
				background: linear-gradient(135deg, #0056b3, #004085);
				transform: translateY(1rpx);
			}
		}

		&.action-success {
			background: linear-gradient(135deg, #28a745, #1e7e34);
			color: white;

			&:active {
				background: linear-gradient(135deg, #1e7e34, #155724);
				transform: translateY(1rpx);
			}
		}

		&.action-warning {
			background: linear-gradient(135deg, #ffc107, #e0a800);
			color: #212529;

			&:active {
				background: linear-gradient(135deg, #e0a800, #d39e00);
				transform: translateY(1rpx);
			}
		}

		&.action-danger {
			background: linear-gradient(135deg, #dc3545, #c82333);
			color: white;

			&:active {
				background: linear-gradient(135deg, #c82333, #bd2130);
				transform: translateY(1rpx);
			}
		}

		&.action-info {
			background: linear-gradient(135deg, #17a2b8, #138496);
			color: white;

			&:active {
				background: linear-gradient(135deg, #138496, #117a8b);
				transform: translateY(1rpx);
			}
		}
	}

	// 加载状态
	.loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.8);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
	}

	.loading-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.loading-spinner {
		width: 80rpx;
		height: 80rpx;
		border: 8rpx solid #f3f3f3;
		border-top: 8rpx solid #FE6100;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 16rpx;
	}

	.loading-text {
		font-size: 32rpx;
		color: #8F97A2;
	}

	// 动画
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	// 响应式设计
	@media (max-width: 750rpx) {

		.status-card,
		.progress-card,
		.info-card {
			margin: 16rpx;
		}

		.card-content {
			padding: 24rpx;
		}

		.action-buttons {
			gap: 12rpx;
		}

		.action-btn {
			padding: 12rpx 24rpx;
			font-size: 24rpx;
		}
	}

	// 弹窗样式
	.dialog-content {
		padding: 32rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.label {
		font-size: 28rpx;
		color: #2C2622;
		margin-right: 16rpx;
		min-width: 120rpx;
	}

	.actual-info-dialog,
	.score-dialog,
	.owner-dialog,
	.default-dialog {
		width: 100%;
	}

	.owner-dialog {
		text-align: center;
		padding: 40rpx 20rpx;
	}

	.owner-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}

	.owner-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	.score-dialog .form-item {
		margin-bottom: 20rpx;
	}

	.score-dialog .label {
		display: block;
		margin-bottom: 8rpx;
	}

	// 评价弹窗特殊样式
	.score-form-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 24rpx;
	}

	.score-form-item .label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 12rpx;
		font-weight: 600;
		width: 100%;
	}

	.score-form-item :deep(.uni-easyinput__content) {
		width: 100%;
	}

	.score-form-item :deep(.uni-rate) {
		margin-top: 8rpx;
	}

	// 帮我买确认完成弹窗样式
	.buy-complete-dialog {
		width: 100%;
	}

	.buy-complete-dialog .form-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 16rpx 0;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.buy-complete-dialog .form-item:last-child {
		border-bottom: none;
	}

	.buy-complete-dialog .label {
		font-size: 28rpx;
		color: #333;
		margin-right: 16rpx;
		min-width: 120rpx;
		font-weight: 600;
	}

	.buy-complete-dialog .value {
		font-size: 28rpx;
		color: #FE6100;
		font-weight: 700;
	}

	.buy-complete-dialog .total-item {
		border-top: 2rpx solid rgba(254, 97, 0, 0.2);
		margin-top: 16rpx;
		padding-top: 20rpx;
	}

	.buy-complete-dialog .total-value {
		font-size: 32rpx;
		color: #FE6100;
		font-weight: 800;
	}

	// 购买凭证图片样式
	.voucher-images {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
		margin-top: 8rpx;
	}

	.voucher-image-item {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.voucher-image-item:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
	}

	.voucher-image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	// 图片上传组件样式优化
	:deep(.uni-file-picker__container) {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	:deep(.uni-file-picker__lists) {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	:deep(.uni-file-picker__item) {
		width: calc((100% - 32rpx) / 3) !important;
		height: calc((100% - 32rpx) / 3) !important;
		margin: 0 !important;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	:deep(.uni-file-picker__item-image) {
		width: 100% !important;
		height: 100% !important;
		border-radius: 12rpx;
	}

	:deep(.uni-file-picker__item-add) {
		width: calc((100% - 32rpx) / 3) !important;
		height: calc((100% - 32rpx) / 3) !important;
		margin: 0 !important;
		border-radius: 12rpx;
		border: 2rpx dashed #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f8f9fa;
		transition: all 0.3s ease;

		&:active {
			background: #e9ecef;
			border-color: #FE6100;
		}
	}

	:deep(.uni-file-picker__item-add-icon) {
		font-size: 48rpx;
		color: #999;
	}

	// 响应式调整
	@media (max-width: 750rpx) {

		:deep(.uni-file-picker__item),
		:deep(.uni-file-picker__item-add) {
			width: calc((100% - 24rpx) / 3) !important;
			height: calc((100% - 24rpx) / 3) !important;
		}

		:deep(.uni-file-picker__container),
		:deep(.uni-file-picker__lists) {
			gap: 12rpx;
		}
	}
</style>